<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>费用查缴</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/chargeroomfee.css" />
    <style>
        .aui_formcontent {
            padding-right: 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content">
            <div class="aui_formbox">
                <div class="aui_formitem aui-list-item-arrow">
                    <div class="aui_formtitle">
                        资源编号
                    </div>
                    <div class="aui_formcontent" v-on:click="do_open()">
                        {{form.FullName}}
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">
                        住户名称
                    </div>
                    <div class="aui_formcontent">
                        {{form.RealName}}
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">
                        联系方式
                    </div>
                    <div class="aui_formcontent">
                        {{form.PhoneNumber}}
                    </div>
                </div>
            </div>
        </div>
        <div class="aui_title">
            应付账单
            <label v-on:click="open_history()">缴费记录</label>
        </div>
        <div class="aui-content contentBox">
            <!-- table1 -->
            <div class="aui_listbox" v-if="list.length>0" style="padding-top:0;">
                <div class="aui_list" v-for="item in list">
                    <ul class="aui-list aui-form-list summary-list">
                        <div class="ul-title ul-title_yfzd" v-on:click="choose_fee(item)">
                            <input v-if="item.IsCanSelect&&!item.NeedChargeWechatAll" type="checkbox" class="aui-radio fl" v-bind:checked='item.Selected'>
                            <label class="warningmsg" v-if='!item.IsCanSelect'>
                          [{{item.WarningMsg}}]
                          </label>
                            <div class="yfzd_con_input fl">
                                {{item.Name}}
                            </div>
                            <div class="fr countMony">￥{{item.TotalCost.toFixed(2)}}</div>
                        </div>
                        <div class="cl"></div>
                        <li class="aui-list-item" v-if="item.StartEndPoint">
                            <div class="aui-list-item-inner" style="border-top: 0px;">
                                <div class="aui-list-item-label">
                                    起止读数
                                </div>
                                <div class="aui-list-item-input">
                                    <input class="txtright" style="color:#888;" readonly="readonly" type="text" v-bind:value="item.StartEndPoint">
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item" v-if="item.CanChangeEndTime">
                            <div class="aui-list-item-inner" style="border-top: 0px;">
                                <div class="aui-list-item-label">
                                    月数
                                </div>
                                <div class="aui-list-item-input aui-bar-list-input" style="padding:0px; margin-right:20px;">
                                    <div class="aui-bar aui-bar-btn" type="count">
                                        <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_reduce_month(item)">
                                            <i class="aui-iconfont aui-icon-minus"></i>
                                        </div>
                                        <div class="aui-bar-btn-item inputbox">
                                            <input v-model="item.CalMonthNumber" type="number" class="aui-input aui-text-center" readonly="true">
                                        </div>
                                        <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_add_month(item)">
                                            <i class="aui-iconfont aui-icon-plus"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner" style="border-top:0px;">
                                <div class="aui-list-item-label">
                                    起止日期
                                </div>
                                <div class="aui-list-item-input txtright">
                                    {{item.StartTime==''?'--':item.StartTime}} 至 {{item.EndTime==''?'--':item.EndTime}}
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item" v-if="false">
                            <div class="aui-list-item-inner" style="border-top: 0px;">
                                <div class="aui-list-item-label">
                                    终止日期
                                </div>
                                <div v-if="item.CanChangeEndTime" class="aui-list-item-input datetime_box">
                                    <input style="color:#333;" class="time_btn" type="text" readonly v-model="item.EndTime" v-bind:data-value="item.EndTime" v-bind:data_id="item.ID" />
                                </div>
                                <div v-if="!item.CanChangeEndTime" class="aui-list-item-input txtright">
                                    {{item.EndTime}}
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="aui_list inside2" v-for="item2 in item.childfee">
                        <ul class="aui-list aui-form-list summary-list">
                            <div class="ul-title ul-title_yfzd" v-on:click="choose_fee(item)">
                                <div class="yfzd_con_input fl">
                                    {{item2.Name}}
                                </div>
                                <div class="fr countMony">
                                    ￥{{item2.TotalCost.toFixed(2)}}
                                </div>
                            </div>
                            <div class="cl"></div>
                            <li class="aui-list-item">
                                <div class="aui-list-item-inner" style="border-top:0px;">
                                    <div class="aui-list-item-label">
                                        起止日期
                                    </div>
                                    <div class="aui-list-item-input txtright">
                                        {{item2.StartTime==''?'--':item2.StartTime}} 至 {{item2.EndTime==''?'--':item2.EndTime}}
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="noorder" v-if="list.length==0" style="vertical-align: middle; text-align: center;padding-top:40%;background:#f0f0f0;">
                <i class="icon iconfont icon-zhangdan" style="font-size:70px; color:#888"></i>
                <h5><br />暂无相关账单</h5>
            </div>
            <!-- table1 -->
        </div>
        <div class="bottomleft" v-if="list.length>0">
            <div v-if="!NeedChargeWechatAll" v-on:click="select_all()" class="select_all fl">
                <input style="left:8px;top:2px;" class="aui-radio" type="radio" v-bind:checked="allchecked" name="radio">
            </div>
            <div class="cost fl">
                合计: <span style="color:red;font-size:0.9rem;">￥{{HeJiCost.toFixed(2)}}</span>
            </div>
            <div class="aui-btn aui-btn-primary aui-btn-block bottomright zhifu" v-on:click="do_pay()">支付</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="js/chargeroomfee.js"></script>

</html>
